<template>
	<view class="box">
		<view class="title">
			<text>设备统计</text>
			<text>设备总数：<text class="num">{{allInternet}}</text>个</text>
		</view>
		<view ref="echarts_1" class="charts-box">
			<!-- <qiun-data-charts :opts="chartOption" :chartData="chartData" type="pie" background="none"/> -->
			<qiun-data-charts type="pie" :opts="opts" :chartData="chartData"></qiun-data-charts>
		</view>
	</view>
</template>

<script>
	// import * as echarts from 'echarts';
	let chartOption = {
		"legend": {
			"show": true,
			"position": "top",
		},
		color: ['#2C72FF', '#5AD8A6', '#FF3737'],
	}
	export default {
		props: ['allInternet'],
		data() {
			return {
				chartData: {
					series: [],
				},
				total: 0,
				chartOption: chartOption,
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [5, 5, 5, 5],
					enableScroll: false,
					extra: {
						pie: {
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: true,
							borderWidth: 3,
							borderColor: "#FFFFFF",
							linearType: "custom"
						}
					}
				},
			}
		},
		onLoad() {

		},
		mounted() {
			// this.init();
			this.getData();
		},
		onReady() {
			// this.getData();
		},
		methods: {
			async getData() {
				try {
					const res = await uni.request({
						// url: `https://apis.map.qq.com/ws/place/v1/search?location=${this.latitude},${this.longitude}&radius=${radius}&keyword=${keyword}&boundary=${boundary}&key=${apiKey}`,
						url: `https://ibms.on-bright.com:8000/msgCenterService/msg/cockpit/getDeviceStat`,
						header: {
						     'Content-Type': 'application/json' // 请求头设置为json格式
						   },
						method: 'GET',
					});
					let echartsData = []
					const { code ,data ,msg } = res[1].data
					if(code == '200'){
						for(const key in data){
							echartsData.push({name:key,value:data[key]})
						}
						this.chartData.series.push({data:echartsData})
					}else{
						this.$util.toast('接口请求失败')
					}
				} catch (err) {
					console.error( err);
				}
				
				// setTimeout(() => {
				// 	//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
				// 	let res = {
				// 		series: [{
				// 			data: [{
				// 				"name": "在线",
				// 				"value": 50
				// 			}, {
				// 				"name": "离线",
				// 				"value": 30
				// 			}]
				// 		}]
				// 	};
				// 	this.chartData = JSON.parse(JSON.stringify(res));
				// 	console.log(this.chartData);
				// }, 500);
			},
			// init() {
			// 	const query = wx.createSelectorQuery()
			// 	let chartDom = query.select('#echarts')
			// 	let myChart = echarts.init(chartDom);
			// 	let option = {
			// 		tooltip: {
			// 			trigger: 'item',
			// 			formatter: '{a} <br/>{b} : {c} ({d}%)'
			// 		},
			// 		legend: {
			// 			// bottom: 10,
			// 			left: 'left',
			// 			data: ['在线总数', '离线总数', '警告总数']
			// 		},
			// 		color: ['#2C72FF', '#5AD8A6', '#FF3737'],
			// 		series: [{
			// 			type: 'pie',
			// 			radius: '65%',
			// 			center: ['50%', '55%'],
			// 			selectedMode: 'single',
			// 			label: {
			// 				formatter: '{b}:{c}'
			// 			},
			// 			data: [{
			// 					value: 700,
			// 					name: '在线总数'
			// 				},
			// 				{
			// 					value: 80,
			// 					name: '离线总数'
			// 				},
			// 				{
			// 					value: 20,
			// 					name: '警告总数'
			// 				},
			// 			],
			// 			emphasis: {
			// 				itemStyle: {
			// 					shadowBlur: 10,
			// 					shadowOffsetX: 0,
			// 					shadowColor: 'rgba(0, 0, 0, 0.5)'
			// 				}
			// 			}
			// 		}]
			// 	};

			// 	option && myChart.setOption(option);
			// }
		}
	}
</script>

<style scoped lang="scss">
	.box {
		height: 600rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 0 20rpx;

		.title {
			height: 80rpx;
			font-size: 32rpx;
			color: #333333;
			font-weight: 600;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.num {
				color: #2C72FF;
			}
		}

		.charts-box {
			height: 520rpx;
			width: 100%;
		}
	}
</style>